<template>
	<div class="archives_enterprise_info">
		<div v-if="entData.id && !editDetail" class="enterprise_info">
			<table width="100%" align="center">
				<tbody>
					<tr>
						<td>企业名称：</td>
						<td>{{ enterpriseInfo.enterprise }}</td>
						<td>所属区域：</td>
						<td>{{ enterpriseInfo.areaName }}</td>
					</tr>
					<tr>
						<td>社会统一信用代码：</td>
						<td>{{ enterpriseInfo.businessLicense }}</td>
						<td>企业类型：</td>
						<td>{{ enterpriseInfo.enterpriseType }}</td>
					</tr>
					<tr>
						<td>组织机构代码：</td>
						<td>{{ enterpriseInfo.orgCode }}</td>
						<td>电话：</td>
						<td>{{ enterpriseInfo.phone }}</td>
					</tr>
					<tr>
						<td>企业编号：</td>
						<td>{{ enterpriseInfo.entNumber }}</td>
						<td>法人：</td>
						<td>{{ enterpriseInfo.legalPerson }}</td>
					</tr>
					<tr>
						<td>分管环保：</td>
						<td>{{ enterpriseInfo.chargeEnvName }}</td>
						<td>经度纬度：</td>
						<td>
							{{ enterpriseInfo.lng }},{{ enterpriseInfo.lat }}
						</td>
					</tr>
					<tr>
						<td>企业地址：</td>
						<td>{{ enterpriseInfo.address }}</td>
						<td></td>
						<td></td>
					</tr>
					<tr class="enterpriseImg">
						<td>企业介绍：</td>
						<td style="border:none">
							{{ enterpriseInfo.entIntroduce }}
						</td>
						<td>企业照片：</td>
						<td>
							<img
								width="100%"
								:src="enterpriseInfo.imageUrl"
								alt
							/>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<el-row v-show="!(entData.id && !editDetail)" style="min-height: 100%;">
			<el-col :span="17">
				<v-form
					:formList="formList"
					:outofSubmit="true"
					ref="formData"
				></v-form>
			</el-col>
			<el-col :span="7">
				<el-form
					:model="rightForm"
					status-icon
					ref="ruleForm"
					label-width="120px"
					class="demo-ruleForm"
				>
					<el-form-item label="经纬度">
						<el-input
							style="width:94%;margin: 0 2%"
							maxlength="20"
							show-word-limit
							v-model="rightForm.lng"
							autocomplete="off"
						></el-input>
						<el-input
							style="width:94%;margin: 0 2%"
							maxlength="20"
							show-word-limit
							v-model="rightForm.lat"
							autocomplete="off"
						></el-input>
					</el-form-item>
					<el-form-item label=" ">
						<div
							style="width: 100%;height: 120px;border-radius: 5px;background:#eee;margin:10px 5px"
						>
							<Map
								baiduMapWidth="120px"
								:mapKeyword="rightForm.search"
								:center="center"
								@searchcomplete="searchcomplete"
							/>
						</div>
						<el-input
							style="width:100%;margin: 0 2%"
							placeholder="搜索"
							suffix-icon="el-icon-search"
							v-model="rightForm.search"
							autocomplete="off"
						></el-input>
					</el-form-item>
					<el-form-item label="企业图片">
						<el-upload
							action="https://jsonplaceholder.typicode.com/posts/"
							list-type="picture-card"
							:on-preview="handlePictureCardPreview"
							:on-success="handleSuccess"
							:before-upload="befUpload"
							:on-remove="handleRemove"
							:limit="1"
							:http-request="htpRequest"
							:auto-upload="false"
							:file-list="fileList"
							ref="uploadFile"
						>
							<i class="el-icon-plus"></i>
						</el-upload>
						<el-dialog :visible.sync="dialogVisible">
							<img width="100%" :src="dialogImageUrl" alt />
						</el-dialog>
					</el-form-item>
				</el-form>
			</el-col>
			<el-col :span="24">
				<div style="text-align:center;padding-bottom:50px;">
					<el-button type="primary" style="width: 130px" @click="submit"
						>保存</el-button
					>
					<el-button type="info" style="width: 130px;" @click="unsubmit">取消</el-button>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import control from "../mixins/control";
import VForm from "@/components/luyiming/VueEleForm/index.vue";
import {
	getArea,
	getEnterpriseType,
	getDepartment,
} from "@/api/RCIM/RCIM-select";
import {
	getEntList,
	insertEntInfo,
	updateEntInfo,
	getEntInfo
} from "@/api/RCIM/RCIM-archives";
import { cloneDeep } from "lodash";
import { deepRecursiveGetStringIdLine } from "@/utils";
import Map from "@/components/ly_components/map/Map";
import { validateFormInt } from "@/utils/validateForm";
export default {
	name: "archives_enterprise_info",
	components: {
		VForm,
		Map
	},
	mixins: [control],
	props: {
		editDetail: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			rightForm: {
				lng: "",
				lat: "",
				search: ""
			},
			dialogVisible: false,
			dialogImageUrl: "",
			enterpriseInfo: {},
			formList: [
				{
					type: "input",
					width: "50%",
					label: "企业名称",
					labelWidth: "120px",
					placeholder: "请输入",
					moduleKey: "enterprise",
					maxlength: "50",
					showWordLimit: true,
					validate: function() {
						return [
							{
								required: true,
								message: "请输入企业名称",
								trigger: "blur"
							}
						];
					}
				},
				{
					type: "cascader",
					width: "49.8%",
					label: "所属区域",
					labelWidth: "120px",
					moduleKey: "area",
					props: {
						checkStrictly: true
					},
					options: [],
					fetch: getArea,
					validate: function() {
						return [
							{
								required: true,
								message: "请选择所属区域",
								trigger: "blur"
							}
						];
					}
				},

				{
					type: "input",
					width: "50%",
					label: "统一信用代码",
					labelWidth: "120px",
					placeholder: "请输入",
					maxlength: "30",
					showWordLimit: true,
					moduleKey: "businessLicense",
					validate: function() {
						return [
							{
								required: true,
								message: "请输入统一信用代码",
								trigger: "blur"
							}
						];
					}
				},
				{
					type: "cascader",
					width: "50%",
					label: "分管环保",
					labelWidth: "120px",
					props: {
						checkStrictly: true
					},
					options: [],
					fetch: getDepartment,
					placeholder: "请输入",
					moduleKey: "chargeEnv",
					validate: function() {
						return [
							{
								required: true,
								message: "请选择所属的环保机构",
								trigger: "blur"
							}
						];
					}
				},
				{
					type: "select",
					label: "单位类型",
					labelWidth: "120px",
					width: "50%",
					placeholder: "请输入",
					moduleKey: "unitType",
					children: "option",
					fetch: getEnterpriseType,
					options: [],
					validate: function() {
						return [
							{
								required: true,
								message: "请选择企业类型",
								trigger: "change"
							}
						];
					}
				},
				{
					type: "input",
					width: "50%",
					label: "法人",
					labelWidth: "120px",
					placeholder: "请输入",
					maxlength: "20",
					showWordLimit: true,
					moduleKey: "legalPerson",
				},
				{
					type: "input",
					width: "50%",
					label: "组织机构代码",
					labelWidth: "120px",
					placeholder: "请输入",
					maxlength: "20",
					showWordLimit: true,
					moduleKey: "orgCode",
				},
				{
					type: "input",
					width: "50%",
					label: "电话",
					labelWidth: "120px",
					placeholder: "请输入",
					moduleKey: "phone",
					maxlength: "20",
					showWordLimit: true,
					validate: function() {
						return [
							{
								required: true,
								message: "请输入企业电话号码",
								trigger: "blur"
							}
							// { validator: validateFormInt, trigger: "blur" },
						];
					}
				},
				{
					type: "input",
					width: "50%",
					label: "企业编号",
					labelWidth: "120px",
					placeholder: "请输入",
					maxlength: "10",
					showWordLimit: true,
					moduleKey: "entNumber"
				},
				{
					type: "input",
					width: "50%",
					label: "企业地址",
					labelWidth: "120px",
					placeholder: "请输入",
					moduleKey: "address",
					maxlength: "80",
					showWordLimit: true,
					validate: function() {
						return [
							{
								required: true,
								message: "请输入企业地址",
								trigger: "blur"
							}
						];
					}
				},
				{
					type: "input",
					width: "50%",
					label: "邮政编码",
					labelWidth: "120px",
					placeholder: "请输入",
					maxlength: "6",
					showWordLimit: true,
					validate: function() {
						return [
							{ validator: validateFormInt, trigger: "blur" }
						];
					},
					moduleKey: "postCode"
				},
				{
					type: "input",
					typeProp: "textarea",
					width: "100%",
					label: "企业介绍",
					labelWidth: "120px",
					placeholder: "请输入",
					maxlength: "200",
					showWordLimit: true,
					moduleKey: "entIntroduce"
				}
			],
			fileList: [],
			imageUrl: "",
			center: {},
			fileUpload: null,
			isRemove: false,
		};
	},
	created() {
		this.formList.map(v => {
			v.style = { margin: "5px 0" };
		});
	},
	mounted() {
		console.log(this.entData, this.showDetail);

		if (this.entData && this.entData.id) {
			this.getEnterpriseInfo();
		}
	},
	methods: {
		/**
		 * @desc 加载图片回调
		 * @param {Object} params 文件信息
		 */
		async htpRequest(params){
			console.log('arguments',arguments)
			this.fileUpload = this.loadFile(params.file)
		},
		/**
		 * @desc 加载图片
		 * @param {Object} file 文件信息
		 */
		loadFile(file){
			return new Promise((res, rej) => {
				const fileRead = new FileReader()
				fileRead.readAsDataURL(file)
				fileRead.onload = function(){
					res(this.result)
				}
				fileRead.onerror = function(){
					rej('读取失败')
				}
			})
		},
		befUpload(value){
			// debugger
		},
		/**
		 * @desc 删除数据
		 * @param {Object} row 表格行数据
		 */
		delet(row) {
			this.$confirm("确认要删除吗？")
				.then(_ => {
					deleteRad(row.id).then(res => {
						if (res.code === 200) {
							this.getList();
							return this.$message({
								type: "success",
								message: "删除成功"
							});
						}
						return this.$message({
							type: "error",
							message: "删除失败"
						});
					});
				})
				.catch(_ => {});
		},
		handleSuccess() {},
		/**
		 * @desc 处理图片预览
		 */
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		/**
		 * @desc 处理表单数据
		 */
		formateForm(formData) {
			const result = cloneDeep(formData);
			result.area = result.area.pop();
			result.chargeEnv = result.chargeEnv.pop();
			return result;
		},
		/**
		 * @desc 获取企业信息
		 */
		getEnterpriseInfo() {
			getEntInfo({ id: this.entData.id }).then(res => {
				// console.log(res, 1111);
				this.enterpriseInfo = cloneDeep(res.data.data);
				this.enterpriseInfo.imageUrl = this.enterpriseInfo.file;
				// this.enterpriseInfo.imageUrl = 'http://a1.att.hudong.com/05/00/01300000194285122188000535877.jpg'
				delete this.enterpriseInfo.file;
				this.fileList = [];
				if(this.enterpriseInfo.imageUrl){
					this.fileList.push({
						name: this.enterpriseInfo.imageUrl.split('/').pop(),
						url: this.enterpriseInfo.imageUrl,
					})
				}
				// this.handleInfo(this.enterpriseInfo);
				this.rightForm.lng = this.enterpriseInfo.lng;
				this.rightForm.lat = this.enterpriseInfo.lat;
				this.enterpriseInfo;

				Promise.all([
					this.$refs.formData.getFormList("area"),
					this.$refs.formData.getFormList("chargeEnv")
				]).then(res => {
					this.enterpriseInfo.area = deepRecursiveGetStringIdLine(
						res[0],
						this.enterpriseInfo.area,
						"value"
					);
					this.enterpriseInfo.chargeEnv = deepRecursiveGetStringIdLine(
						res[1],
						this.enterpriseInfo.chargeEnv,
						"value"
					);
					this.$refs.formData.setDefaultValue(this.enterpriseInfo);
				});
				// console.log(this.$refs.formData)
				this.center = {
					lng: this.rightForm.lng,
					lat: this.rightForm.lat
				};
			});
		},
		handleInfo(infoObject) {
			// 处理获取实例信息，与formList的数据的匹配
			const tempList = cloneDeep(this.formList);
			if (!infoObject || typeof infoObject != "object") return;
			for (let key in infoObject) {
				tempList.forEach(item => {
					if (key === item.moduleKey) {
						item["defaultValue"] = infoObject[key];
					}
				});
			}
			this.formList = tempList;
			//   console.log(this.formList, 2222);
		},
		unsubmit(){

			this.$emit("closeDetail", this.entData);
		},
		/**
		 * @desc 文件移除回调
		 * @param {Object} file 文件数据
		 * @param {Array} fileList 文件集合
		 */
		handleRemove(file, fileList) {
			// debugger
			if(file.status === 'success'){
				let index = this.fileList.findIndex(item => item.url === file.name)
				this.fileList.splice(index, 1)
				this.isRemove = true;
			}
			// console.log(file, fileList);
		},
		/**
		 * @desc 新增、编辑数据
		 * @param {Object} val 表单数据
		 */
		submitForm(file){
			let formData = {
				...this.$refs.formData.form,
				...formData,
				...this.rightForm
			};
			let params = this.formateForm(formData);
			delete params.imageUrl;
			if(file){
				params.file = file
			}else{
				if(this.fileList.length === 0 && this.isRemove){
					params.file = 'delete'
				}
			}
			console.log(JSON.stringify(params));
			if (this.entData.id) {
				params = { ...params, id: this.entData.id };
				updateEntInfo(params).then(res => {
					if (res.code === 200) {
						this.dialogFormVisible = false;
						this.fileList = [];
						const entData = {
							id: res.data.response.id
						};
						this.$emit("closeDetail", entData);
						return this.$message({
							type: "success",
							message: "添加成功"
						});
					}
					return this.$message({
						type: "success",
						message: "添加失败"
					});
				});
			} else {
				insertEntInfo(params).then(res => {
					if (res.code === 200) {
						this.dialogFormVisible = false;
						const entData = {
							id: res.data.response.id
						};
						this.fileList = [];
						this.$emit("closeDetail", entData);
						return this.$message({
							type: "success",
							message: "添加成功"
						});
					}
					return this.$message({
						type: "success",
						message: "添加失败"
					});
				});
			}
		},
		/**
		 * @desc 提交数据
		 */
		submit() {
			let isGo = true;
			this.$refs.formData.validate((type) => {
				if(!type) isGo = false;
			})
			if(!isGo){
				return
			}
			this.$refs.uploadFile.submit()
			this.fileUpload?.then(
				file => {
					this.submitForm(file)
				}
			) || this.submitForm();
			this.fileUpload = null;
		},
		searchcomplete(result) {
			//   console.log(result, "result");
			const searchResult =
				result && ((result.Br && result.Br[0] && result.Br[0].point) || ( result.Ir && result.Ir[0] && result.Ir[0].point ));
			if (searchResult) {
				this.rightForm.lng = searchResult.lng;
				this.rightForm.lat = searchResult.lat;
			}
			console.log(this.rightForm, "rightForm");
		}
	}
};
</script>

<style lang="scss" scoped>
.archives_enterprise_info {
	height: calc(100% - 100px);
	position: relative;

	.enterprise_info {
		padding-bottom: 50px;
		table,
		tr,
		th,
		td {
			border: 1px solid #d6d6d6;
		}
		table {
			border-collapse: collapse;
			tr {
				td {
					padding: 15px 10px 15px 10px;
					background: #fff;
					color: #606266;
					@include ellipsis();
				}

				td:nth-child(1) {
					width: 16%;
					background: #d5e9fa;
					text-align: right;
				}
				td:nth-child(2) {
					width: 29%;
				}
				td:nth-child(3) {
					width: 10%;
					text-align: right;
					background: #d5e9fa;
				}
				td:nth-child(4) {
					width: 35%;
				}
			}
			tr.enterpriseImg {
				background: #fff;
				td:nth-child(1) {
					padding-bottom: 180px;
				}
				td:nth-child(2) {
					display: block;
					width: 100%;
					height: 210px;
				}
				td:nth-child(3) {
					padding-bottom: 180px;
				}
				td:nth-child(4) {
					// display: flex;
					// height: 210px;
					// align-items: center;
					// justify-content: flex-start;

					img {
						display: block;
						width: 160px;
						height: 160px;
						border-radius: 6px;
						background: #ccc;
					}
				}
			}
		}
	}
}
</style>
